import React, { Component } from 'react'
import { Link,NavLink } from 'react-router-dom'
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './TopNav.scss'
export default class TopNav extends Component {
  render() {
    return (
      <div className='top_nav'>
        <div className="top_nav_center">
          <div className='top_left'>
            <Link to='/' className="head_logo"></Link>
            <ul>
              <li><NavLink className='nav_link' activeClassName='nav_act' to='/discover'>发现音乐</NavLink></li>
              <li><NavLink className='nav_link' activeClassName='nav_act' to='/my'>我的音乐</NavLink></li>
              <li><NavLink className='nav_link' activeClassName='nav_act' to='/friend'>朋友</NavLink></li>
              <li><NavLink className='nav_link' activeClassName='nav_act' to='/shangcheng'>商城</NavLink></li>
              <li><NavLink className='nav_link' activeClassName='nav_act' to='/download'>下载客户端</NavLink></li>
            </ul>
          </div>
          <div className="top_right">
            <Input size="large" className='search' placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />} />
            <div className='creator_center'>创作者中心</div>
            <div className="login">登录</div>
          </div>
        </div>
      </div>
    )
  }
}
